<template>
  <div class="px-5 py-12 sm:py-48">
    <div class="form-container"
      ref="box">
      <div class="flex items-center justify-center">
        <common-link path="/"
          class="go-home">
          <span class="sr-only">Toolify</span>
          <img class="h-8 w-auto sm:h-11"
            src="@/static/images/logo.png"
            alt="Toolify logo" />
        </common-link>
      </div>
      <div class="text-center mt-11">
        <h1 class="text-gray-1000 font-semibold text-2xl break-words">{{ $t('resetLinkSendSuccess') }}</h1>
        <p class="text-gray-1500 text-sm mt-3 desc break-words">{{ $t('resetLinkSendSuccessTips') }}</p>
      </div>
      <div class="mt-8"
        v-if="form.email">
        <p class="text-gray-1000 font-semibold text-lg">Email</p>
        <h3 class="mt-2 text-gray-1000 font-semibold text-lg">{{ form.email }}</h3>
      </div>

      <el-button type="primary"
        @click.native.prevent="reSend"
        class="w-full h-11 mt-8 to-resend-email">{{ $t('resendEmail') }}</el-button>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'Login',
  head() {
    return {
      htmlAttrs: {
        lang: this.locale,
      },
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.description,
        },
        {
          hid: 'og:description',
          name: 'og:description',
          content: this.description,
        },
        {
          hid: 'og:url',
          name: 'og:url',
          content: this.canonicalLink,
        },
      ],
      link: [
        {
          rel: 'canonical',
          href: this.canonicalLink,
        },
      ],
    }
  },
  async asyncData({ app, route, params, query, $axiosApi, store }) {
    let pageDesc = app.$cookies.get('pageDesc')
    try {
      let [langRes] = await Promise.all([await $axiosApi.getLanguagesMul()])

      let description
      let curLocale = store.state.locale
      if (
        langRes.code === 200 &&
        langRes.data &&
        langRes.data.languages &&
        langRes.data.languages.description &&
        langRes.data.languages.description.length > 0 &&
        langRes.data.languages.description[0].content &&
        (langRes.data.languages.description[0].content[curLocale] ||
          langRes.data.languages.description[0].content.default)
      ) {
        if (langRes.data.languages.description[0].content[curLocale]) {
          description = langRes.data.languages.description[0].content[curLocale]
        } else {
          description = langRes.data.languages.description[0].content.default
        }

        app.$cookies.set('pageDesc', description, {
          maxAge: 60 * 60 * 24 * 7,
          path: '/',
        })
      } else if (pageDesc) {
        description = pageDesc
      }

      return {
        description,
      }
    } catch (err) {
      console.log(err)
    }
  },
  computed: {
    ...mapState({
      locale: (state) => state.locale,
    }),
  },
  data() {
    return {
      canonicalLink: `https://www.toolify.ai${this.$route.fullPath}`,
      loading: false,
      form: {
        email: '',
      },
      description: null,
    }
  },
  mounted() {
    if (this.$route.query.email) {
      this.form.email = this.$route.query.email
    } else {
      this.$message.error(this.$i18n.t('linkError'))
    }
  },
  methods: {
    reSend() {
      this.$router.replace({
        name: this.locale === 'en' ? 'forgetPassword' : 'lang-forgetPassword',
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.form-container {
  max-width: 435px;
  margin: 0 auto;
}
</style>
